<template>
    <div>
      <!-- 查询框 -->
      <el-input
        placeholder="请输入商品编号"
        v-model="searchText"
        style="width: 200px; margin-bottom: 20px;">
      </el-input>
      <el-button @click="fetchData" icon="el-icon-search" circle></el-button>
  
      <!-- 新增按钮 -->
      <el-button type="primary" @click="showCreateDialog" icon="el-icon-plus" style="margin-bottom: 10px;">新增购物车</el-button>
  
      <!-- 列表展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="sid" label="购物车编号" width="180">
          <template #default="scope">
            A00{{ scope.row.sid }}
          </template>
        </el-table-column>
        <el-table-column prop="uid" label="用户编号" width="180">
          <template #default="scope">
            A00{{ scope.row.uid }}
          </template>
        </el-table-column>
        <el-table-column prop="pid" label="商品编号" width="180">
          <template #default="scope">
            A00{{ scope.row.pid }}
          </template>
        </el-table-column>
        <el-table-column prop="snum" label="数量" width="180"></el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="showEditDialog(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="confirmDelete(scope.row.sid)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 新增和修改的对话框 -->
      <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
        <el-form :model="orderForm">
          <el-form-item label="用户编号" label-width="100px">
            <el-input v-model="orderForm.uid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品编号" label-width="100px">
            <el-input v-model="orderForm.pid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="数量" label-width="100px">
            <el-input v-model="orderForm.snum" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveShop">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>

  import {listShop,delShop,addOrEditShop} from "@/api/shop"


  export default {
    data() {
      return {
        tableData: [ ], // 表格数据
        searchText: '', // 查询框内容
        dialogVisible: false, // 对话框显示状态
        dialogTitle: '', // 对话框标题
        orderForm: { // 订单表单
            sid: '',
          uid: '',
          pid: '',
          snum: ''
        }
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      // 获取数据
      fetchData() {
        listShop(this.queryParams).then(response => {
          this.tableData = response.data;
        });
      },
      // 显示新增对话框
      showCreateDialog() {
        this.dialogTitle = '新增订单';
        this.orderForm = { oid: '', pid: '', snum: '' };
        this.dialogVisible = true;
      },
      // 显示修改对话框
      showEditDialog(order) {
        this.dialogTitle = '修改订单';
        this.orderForm = { ...order };
        this.dialogVisible = true;
      },
      // 保存商品（新增或修改）
      saveShop() {
           const action = this.orderForm.sid ? '修改' : '新增';
           const successMsg = `${action}成功`;

           addOrEditShop(this.orderForm)
             .then(response => {
               if (response && response.code === 200) {
                 if (response.msg) {
                   this.$message({
                     message: '新增/修改成功',
                     type: 'success'
                   });
                 } else {
                   this.$message({
                     message: successMsg,
                     type: 'success'
                   });
                 }
                 this.dialogVisible = false;
                 this.fetchData();
               } else {
                 this.$message.error('服务器响应异常，请稍后再试');
               }
             })
             .catch(error => {
               if (error.response && error.response.status === 500) {
                 if (error.response.data && error.response.data.msg) {
                   this.$message.error(error.response.data.msg);
                 } else {
                   this.$message.error('服务器发生错误，请联系管理员');
                 }
               } else {
                 this.$message.error('商品不存在');
               }
             });
      },
      confirmDelete(sid) {
        this.$confirm('确定要删除这项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 调用接口删除产品
          this.deleteShop(sid);
        }).catch(() => {
          // 用户点击取消，不做任何操作
        });
      },
      // 删除商品
      deleteShop(sid) {
        delShop(sid).then(() => {
          this.fetchData();
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        }).catch(error => {
          console.error('删除失败', error);
          this.$message.error('删除失败');
        });
      },

    }
}
 </script>
  